<template>
  <div>
    <!-- 动态 style -->
    <!-- 
      两种情况:
         1.绑定对象  对象属性名是样式名,属性值是央视之
         {css样式名:css样式值}
         2.绑定数组 应用对象
     -->
    <div :style="{color:'green',fontSize:'20px'}">你好啊</div>
  </div>
</template>

<script>
export default {
  name: "VueDemoApp",

  data() {
    return {
      age:20,
      flag: true,
      arr:['red','big']
    };
  },
};
</script>

<style>
div {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
.red {
  color: red;
}
.big{
  font-size: 40px;
}
.mid{
  text-align: center;
}
</style>